/* eslint-disable react/display-name */
import React, { useState } from 'react';
import CommonFetch from '@/config/CommonFetch';
import { FormConfig, layout, tableConfig } from './config';
import { Form, Input, Button, Table } from 'antd';
import _ from 'lodash';
import { useDispatch } from 'react-redux';
import Slider from 'react-slick';

const Home = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  const dispatch = useDispatch();
  const Components = {
    Input,
  };

  const onFinish = (values) => {
    setLoading(true);
    // 使用了中间件之后,dispatch派发的action可以为function类型
    dispatch((dispatch) => {
      dispatch({ type: 'num', payload: new Date().getTime() });
    });
    CommonFetch.STRINGpost_json('/api', 'phoneNo=' + values.phoneNo).then(
      (ret) => {
        if (ret.error_code === 0) {
          setData(
            _.map([...data, { ...ret.result, ...values }], (item, key) => {
              return { ...item, id: key };
            })
          );
        }
        setLoading(false);
      }
    );
  };

  const tableProps = {
    columns: tableConfig,
    dataSource: data,
    rowKey: 'id',
    loading,
  };
  const settings = {
    autoplay: true,
    centerMode: true,
    dots: true,
  };
  return (
    <div>
      <Form name="phoneCS" {...layout} onFinish={onFinish}>
        {_.map(FormConfig, (item, key) => {
          const Component = item.component ? Components[item.component] : '';
          return (
            <div key={item.id} className="form-item-content">
              <div style={{ width: 'auto', flex: 1 }}>
                <Form.Item
                  name={item.name}
                  label={item.label}
                  rules={item.rules}
                  {...item.props}
                >
                  <Component
                    placeholder={item.placeholder}
                    {...item.componentProps}
                  />
                </Form.Item>
              </div>
              <div className="content-notes">{item.notes}</div>
            </div>
          );
        })}
        <Form.Item>
          <Button type="primary" htmlType="submit">
            查询
          </Button>
        </Form.Item>
      </Form>
      <Table {...tableProps} />
      <Slider {...settings}>
        <h3>1</h3>
        <h3>2</h3>
        <h3>3</h3>
        <h3>4</h3>
        <h3>5</h3>
        <h3>6</h3>
      </Slider>
    </div>
  );
};

export default Home;
